<script setup>
import { apiGetLogisticsPreferredStrategy, overallOptions, tmsOverallOptions } from "@/api/public"
import useCommonStore from "@/store/modules/common"
import "./index.scss"
import SelectProductCategories from "@/components/Selects/ProductCategories/index.vue"
import { apiGetChannel } from "@/api/public"

import Vedit from "@/views/order-strategy/logistics-preferred/components/edit.vue"

const commonStore = useCommonStore()
const props = defineProps({
  formData: Object,
})
const optionsShippingWarehouse = computed(() => {
  if (!commonStore.warehouseOption.length) {
    commonStore.getWarehouseOption()
  }
  return commonStore.warehouseOption
})
const shippingMethodOptions = ref({
  mapChannel: [],
  mapChannelIsRegistered: [],
  mapTransportType: [],
})
const changeOrderStatusFormatter = (data) => {
  return data.filter((v) => [2, 9].includes(v.value))
}
const resLogistics = ref([])
const initResLogistics = async () => {
  const res = await apiGetLogisticsPreferredStrategy()
  resLogistics.value = res.data
}
const initSelectOptions = async () => {
  const res = await tmsOverallOptions({
    params: ["mapTransportType", "mapChannelIsRegistered"],
  })
  shippingMethodOptions.value = res.data
}

const mapChannelFormatter = (list) => {
  return list.map((v) => ({
    label: v.channel_name,
    value: v.id,
  }))
}

/**
 * 订单新状态 Change
 */
const handleOrderStatus = () => {
  props.formData.cancel_reason = ""
  props.formData.cause_reason = ""
}

//编辑
const edit = ref()
const ruleEdit = (row) => {
  edit.value.open({ id: props.formData.wms_preferred_id }, "edit", true)
}

onMounted(() => {
  initSelectOptions()
  initResLogistics()
})

const shippingRule = [
  { label: "手动选择", value: 0 },
  { label: "规则匹配", value: 1 },
]

const ruleChange = (e) => {
  console.log(e)
  if (e == 1) {
    props.formData.shipping_warehouse = ""
    props.formData.is_registered = ""
    props.formData.transport_type = ""
    props.formData.shipping_method = ""
    props.formData.logistics_rules = ""
  } else {
    props.formData.wms_preferred_id = ""
  }
  console.log()
}

const shippingWarehousechange = (e, type = "") => {
  if (e) {
    apiGetChannel({ warehouse: [e], source_os: "oms" }).then((res) => {
      type == "edit" && (props.formData.shipping_method = "")
      shippingMethodOptions.value.mapChannel = res.data
      if (!e) {
        shippingMethodOptions.value.mapChannel = []
      }
    })
  } else {
    props.formData.shipping_method = ""
    shippingMethodOptions.value.mapChannel = []
  }
}
defineExpose({
  shippingWarehousechange,
})
</script>
<template>
  <!-- <el-form-item label="转换仓库和运输方式" class="info-title" /> -->
  <div class="info-title">转换仓库和运输方式</div>
  <div>
    <el-form-item label-width="100">
      <el-radio :label="0" v-model="formData.is_shipping_rule">手动选择</el-radio>
      <el-tooltip class="box-item" effect="dark" raw-content content="满足条件后，订单上的发货仓库和运输方式都同步更新；<br/>当只选仓库，不选物流渠道，则默认取此仓最便宜的渠道；" placement="top">
        <div class="dk-iconfont icon-Question ml-[-16px]"></div>
      </el-tooltip>
    </el-form-item>

    <div class="preferred-box" v-if="formData.is_shipping_rule === 0">
      <el-form-item label="发货仓库：" class="mb-3">
        <el-select v-model="formData.shipping_warehouse" class="w-[400px]" clearable filterable placeholder="请选择" @change="shippingWarehousechange">
          <el-option v-for="(d, i) in optionsShippingWarehouse" :key="i" :label="d.label" :value="d.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输方式：" class="flex mb-3">
        <VGroup>
          <VXSelect :list="shippingMethodOptions.mapChannelIsRegistered" clearable placeholder="是否挂号" style="width: 110px" v-model="formData.is_registered" />
          <VXSelect :list="shippingMethodOptions.mapTransportType" filterable multiple clearable collapse-tags style="width: 200px" placeholder="渠道类型" v-model="formData.transport_type" />
          <VXSelect
            :list="shippingMethodOptions.mapChannel"
            filterable
            multiple
            clearable
            class="select-input"
            :formatter="(data) => data.map((v) => ({ label: v.channel_name, value: v.id }))"
            collapse-tags
            placeholder="运输方式"
            v-model="formData.shipping_method"
          />
        </VGroup>
      </el-form-item>
      <el-form-item label="物流优选：" class="mb-0">
        <el-radio-group v-model="formData.logistics_rules">
          <el-radio :label="0">按价格最低匹配</el-radio>
          <el-radio :label="1">按时效最快匹配</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
  </div>

  <div>
    <el-form-item label-width="100" class="mt-[16px]">
      <el-radio :label="1" v-model="formData.is_shipping_rule">规则匹配</el-radio>
      <el-tooltip class="box-item" effect="dark" content="满足条件后，执行对应分仓和物流优选规则；" placement="top">
        <div class="dk-iconfont icon-Question ml-[-16px]"></div>
      </el-tooltip>
    </el-form-item>

    <div class="preferred-box mb-[16px]" v-if="formData.is_shipping_rule === 1">
      <el-form-item label="分仓和物流优选：" class="mb-0">
        <el-select filterable v-model="formData.wms_preferred_id" class="w-[400px]">
          <el-option v-for="item in resLogistics" :value="item.value" :label="item.label" :key="item.value" />
        </el-select>
        <el-link :underline="false" type="primary" class="ml-2" @click="ruleEdit">查看详情</el-link>
      </el-form-item>
    </div>
  </div>

  <div class="info-title">改变订单状态</div>
  <div class="ml-[110px]">
    <el-form-item label="订单新状态：">
      <VXSelect v-model="formData.change_order_status" :formatter="changeOrderStatusFormatter" @change="handleOrderStatus" clearable dictionary="order_status" class="w-[400px]" />
    </el-form-item>
    <el-form-item v-if="formData.change_order_status === 2" label="问题原因：">
      <VXSelect v-model="formData.cause_reason" placeholder="请选择" clearable dictionary="order_question" class="w-[400px]" />
    </el-form-item>
    <el-form-item v-if="formData.change_order_status === 9" label="取消原因：">
      <VXSelect v-model="formData.cancel_reason" placeholder="请选择" dictionary="order_cancel_reason" class="w-[400px]" />
    </el-form-item>
  </div>

  <div class="info-title">设置订单备注</div>
  <div class="ml-[110px]">
    <el-form-item label="订单备注：" class="start">
      <el-input type="textarea" :row="4" class="w-[400px]" v-model="formData.order_remark" placeholder="请输入"></el-input>
    </el-form-item>
  </div>

  <div class="info-title">设置平台标记发货</div>
  <div class="ml-[110px]">
    <el-form-item label="标记发货状态：">
      <VXSelect dictionary="mark_shipment_status" class="w-[400px]" placeholder="请选择" clearable v-model="formData.mark_shipping_status" />
    </el-form-item>
  </div>

  <div class="info-title flex items-center">
    设置订单优先级别
    <el-tooltip class="box-item" effect="dark" content="满足上面条件后，自动把上面的订单设置为相应优先级，进行配货逻辑进行优先发货" placement="top">
      <div class="dk-iconfont icon-Question ml-[12px]"></div>
    </el-tooltip>
  </div>
  <div class="ml-[110px]">
    <el-form-item label="订单优先级别：">
      <VXSelect dictionary="order_strategy_order_priority" class="w-[400px]" placeholder="请选择" clearable v-model="formData.order_priority" />
    </el-form-item>
  </div>

  <div class="info-title">设置礼品&发货订单备注</div>
  <div class="ml-[110px]">
    <el-form-item label="发货备注: ">
      <el-input type="textarea" :row="4" class="w-[400px]" v-model="formData.consignment_remark" placeholder="发货备注"></el-input>
    </el-form-item>
    <el-form-item label="状态：">
      <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
    </el-form-item>
    <Vedit ref="edit" title="查看" class="dialogPublic" />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  width: 140px !important;
}
.info-title > :deep(.el-form-item__label) {
  font-size: 14px;
  font-weight: bold;
  color: #000 !important;
  width: 165px !important;
  font-weight: 500;
  margin-bottom: 0 !important;
}
.info-title {
  :deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: bold;
    color: #000 !important;
    width: 165px !important;
    font-weight: 500;
    margin-bottom: 0 !important;
    text-align: left;
  }
}
.info-title > :deep(.el-form-item__content) {
  display: block;
}
.preferred-box {
  border-radius: 8px;
  // background: #f6faff;
  background-color: var(--base-small-bg-color);
  padding: 16px 0 16px 110px;
  .mb-0 {
    margin-bottom: 0 !important;
  }
}
.select-input {
  width: 240px;
  :deep(.el-tag.is-closable) {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  :deep(.el-select__tags .el-tag:last-child) {
    padding: 4px;
  }
  :deep(.el-select__input) {
    max-width: 30px !important;
  }
}
</style>
